<template>
    <div class="home">
        <p>自定义{{ msg }}</p>
        <P><input type="text" v-model="msg"></P>
    </div>
</template>


<script setup lang="ts" name="Page60">
import { ref, customRef } from 'vue';
// 使用customRef 自定义响应式数据
let initValue = '你好'
let timer:number;
//  track (跟踪),trigger(触发)
let msg = customRef((track, trigger) => {
    return {
        // get 何时调用，msg被读取时
        get() {
            track() // 告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
            return initValue
        },
        // set何时调用，msg被修改时
        set(val) {
            clearTimeout(timer)            
            timer = setTimeout(() => {
                console.log('执行了~~', val)
                initValue = val
                trigger() // 通知vue一下 数据msg变化了
            },1000)
        }
    }
})

</script>

<style lang="scss" scoped></style>